<template>
  <div id="app">
    <header>
      <AppHeader></AppHeader>
    </header>
    <main>
      <router-view />
    </main>
    <footer>
      <router-view name="AppFooter" />
    </footer>
  </div>
</template>

<script>
import AppHeader from "@/components/AppHeader";
export default {
  name: "app",
  components: {
    AppHeader
  }
};
</script>

<style lang="scss">
html,
body {
  margin: 0;
  height: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  header {
    height: 46px;
  }
  main {
    flex: 1;
    overflow: hidden;
  }
  footer {
    height: 50px;
  }
}
</style>
